<template>
    <div class="concern">
        <div class="container">
            <div class="top">
                <ul>
                    <li>
                        <div class="icon">
                            <img src="../assets/img/zhihu.png" alt="">
                        </div>
                        <div class="title">
                            <span>知乎日报</span>
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <img src="../assets/img/add.png" alt="">
                        </div>
                        <div class="title">
                            <span>关注更多</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="list">
                <ul>
                    <li v-for="(item, index) in arr">
                        <router-link to="/concerndetali">
                            <div class="list_top">
                                <div class="list_icon">
                                    <img :src=item.icon alt="">
                                </div>
                                <div class="name">
                                    <span>{{ item.name }}</span>
                                </div>
                                <div class="send_time">
                                    <span>{{ item.send_time }} · 发表了文章</span>
                                </div>
                            </div>
                            <div class="list_main">
                                <div class="list_title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="list_content">
                                    <span>{{ item.content }}</span>
                                </div>
                                <div class="list_img">
                                    <img :src=item.img1 alt="">
                                    <img :src=item.img2 alt="">
                                </div>
                                <div class="list_group">
                                    <div>
                                        <van-icon name="gem-o" color="#909094" />
                                        <span>{{ item.tonbu }}</span>
                                    </div>
                                    <div>
                                        <van-icon name="star-o" color="#909094" />
                                        <span>{{ item.star }}</span>
                                    </div>
                                    <div>
                                        <van-icon name="chat-o" color="#909094" />
                                        <span>{{ item.comment }}</span>
                                    </div>
                                </div>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </div>
            <div style="width: 100%;height: 70px;"></div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.concern {
    margin-top: 100px;
    width: 100%;

    .container {
        width: 94%;
        margin: 0 auto;
    }

    .top {
        width: 100%;
        height: 120px;
        margin-top: 20px;

        background-color: #fff;
        border-bottom: 1px solid #cbc8c8;

        ul {
            width: 100%;
            display: flex;
            height: 100%;

            // justify-content: space-between;
            li {
                width: 20%;
                height: 120px;
                margin-left: 10px;
                position: relative;

                .icon {
                    width: 100%;

                    img {
                        width: 100%;
                        // border-radius: 50%;
                    }
                }

                .title {
                    font-size: 16px;
                    color: #98979c;
                    position: absolute;
                    bottom: 20px;
                    left: 3px;
                    text-align: center;
                }
            }

        }

    }

    .list {
        width: 100%;
        margin-top: 20px;

        ul {
            width: 100%;

            li {
                margin-top: 10px;
                width: 100%;
                position: relative;
                border-bottom: 1px solid #cbc8c8;

                .list_icon {
                    width: 16%;

                    img {
                        width: 100%;
                    }
                }

                .name {
                    position: absolute;
                    top: 0px;
                    left: 70px;
                    font-size: 18px;
                }

                .send_time {
                    position: absolute;
                    top: 35px;
                    left: 70px;
                    font-size: 14px;
                    color: #cbc8c8;
                }

                .list_title {
                    font-size: 18px;
                    margin-top: 10px;
                    font-weight: bold;
                }

                .list_content {
                    font-size: 15px;
                    height: 40px;
                    line-height: 22px;
                    color: #808082;
                    margin-top: 10px;
                }

                .list_img {
                    width: 100%;
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;

                    img {
                        width: 49%;
                    }
                }

                .list_group {
                    margin-top: 10px;

                    width: 60%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;

                    div {
                        position: relative;
                    }

                    span {
                        font-size: 16px;
                        color: #909094;
                        position: absolute;
                        left: 34px;
                        top: 5px;
                    }
                }
            }
        }
    }
}
</style>

<script>
export default {
    data() {
        return {
            arr: [
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '15小时前',
                    title: '海通证券姜诚君被遣返回国;《黑神话:悟空》壁画AI疑云揭晓 | 早报 20240830',
                    content: '嘿，这里是知乎早报!编辑部小李为广大知友准备了每日必看的热点消息和编辑精选的优质内容，更有...',
                    img1: require('../assets/img/concern_1.png'),
                    img2: require('../assets/img/concern_2.png'),
                    tonbu: '224',
                    star: '26',
                    comment: '15'
                },
                {

                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-26',
                    title: '诺贝尔奖巡礼圆桌上线!一起聊诺奖，赢好礼',
                    content: '2024 年诺贝尔奖即将揭晓，今年的奖项会花落谁家呢?你又有哪些期待呢?知乎科学联合知乎人文...',
                    img1: require('../assets/img/cc1.png'),
                    img2: require('../assets/img/cc2.png'),
                    tonbu: '94',
                    star: '8',
                    comment: '3'
                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-25',
                    title: '已经掌握独立建造第三代核电站的技术的国家有哪些?',
                    content: '邢继: 谢邀 @央视新闻 我是“华龙一号”总设计师邢继。10年之后的我们，可以非常确定地回答题主.',
                    img1: require('../assets/img/cc5.png'),
                    img2: require('../assets/img/cc6.png'),
                    tonbu: '226',
                    star: '286',
                    comment: '336'
                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-25',
                    title: '央行表示将降低存量房贷利率;宝马8月在华销量大跌42% 早报 | 20240925',
                    content: '嘿，这里是知乎早报!编辑部小李为广大知友准备了每日必看的热点消息和编辑精选的优质内容，更有…',
                    img1: require('../assets/img/cc7.png'),
                    img2: require('../assets/img/cc8.png'),
                    tonbu: '198',
                    star: '16',
                    comment: '34'
                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-25',
                    title: '为啥生物在数量上大多呈现出对称性?',
                    content: '为啥生物在数量上大多呈现出对称性?比如两只眼睛、两只耳朵。有没有特例?生物在各种器官的.',
                    img1: require('../assets/img/cc9.png'),
                    img2: require('../assets/img/cc10.png'),
                    tonbu: '423',
                    star: '26',
                    comment: '27'
                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-24',
                    title: '中国人民解放军火箭军成功向太平洋发射洲际《炉石传说》国服正式回归早.弹道导弹;',
                    content: '嘿，这里是知乎早报!编辑部小李为广大知友准备了每日必看的热点消息和编辑精选的优质内容，更有.',
                    img1: require('../assets/img/cc3.png'),
                    img2: require('../assets/img/cc4.png'),
                    tonbu: '225',
                    star: '19',
                    comment: '29'


                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-24',
                    title: '瞎扯·不会撩猫的人强撩是什么体验?',
                    content: 'Q:不会撩猫的人强撩是什么体验?@陶映雪:[图片]Q:如何看待宾大教授飞机上算数学方程被当做.',
                    img1: require('../assets/img/cc11.png'),
                    img2: require('../assets/img/cc12.png'),
                    tonbu: '241',
                    star: '20',
                    comment: '23'

                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-23',
                    title: '云南一高校 3硕士被聘为宿管;10月11日《哈利·波特》全系列将在内地重映早...',
                    content: '嘿，这里是知乎早报!编辑部小李为广大知友准备了每日必看的热点消息和编辑精选的优质内容，更有...',
                    img1: require('../assets/img/cc13.png'),
                    img2: require('../assets/img/cc14.png'),
                    tonbu: '157',
                    star: '20',
                    comment: '20'

                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-23',
                    title: '知乎宝藏好文奖·第31期',
                    content: '这周共有8篇好文推荐，共产生了23 位知乎伯乐他们可以共同瓜分本周的 30000 盐粒，以及后续...',
                    img1: require('../assets/img/cc15.png'),
                    img2: require('../assets/img/cc16.png'),
                    tonbu: '115',
                    star: '19',
                    comment: '12'

                },
                {
                    icon: require('../assets/img/zhihu.png'),
                    name: '知乎日报',
                    send_time: '09-23',
                    title: '瞎扯·化学领域有哪些经典的笑话?',
                    content: 'Q:化学领域有哪些经典的笑话?@Benjamin:一群水分子整齐排列地跑过来，其他水分子羡慕地赞叹...',
                    img1: require('../assets/img/cc17.png'),
                    img2: require('../assets/img/cc18.png'),
                    tonbu: '307',
                    star: '28',
                    comment: '25'
                },

            ]
        }
    }
}
</script>